<template>
	<view class="page">
		<!-- 数据加载动画 start -->
		<fu-loading v-if="isShowLoading"></fu-loading>
		<!-- 数据加载动画 end -->
		<block v-else>
			<!-- 反馈列表 start -->
			<view class="feedback-list">
				<view class="feedback-list-item" v-for="(item, index) in list" :key="index">
					<view class="flex item-list">
						<view class="avatar"><fu-image radius="50%" :src="thumb" mode="aspectFill"></fu-image></view>
						<view class="item-desc">
							<view class="writeContent margin-bottom word-break-all">{{ item.body }}</view>
							<view class="img-list" v-if="item.thumb.length">
								<block v-for="(imgItem, imgIndex) in item.thumb" :key="imgIndex">
									<view class="img-list-item" @tap="ViewImage(item.thumb, imgIndex)"><fu-image :src="imgItem" mode="aspectFill"></fu-image></view>
								</block>
							</view>
							<view class="concart">
								联系方式 :
								<text class="margin-left-sm">{{ item.contact }}</text>
							</view>
							<view class="text-gray feedback-type">
								反馈类型：
								<text class="margin-left-sm">{{ item.type || '无' }}</text>
							</view>
							<view class="text-gray feedback-type">
								反馈时间：
								<text class="margin-left-sm">{{ item.create_time | formatDate('YYYY-MM-DD') }}</text>
							</view>
							<view class="flex replay-content" v-if="item.replay">
								<view class="replay-desc ">平台回复:</view>
								<view class="replay-text">{{ item.replay }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 反馈列表 end -->
			<!-- 无数据 start -->
			<view v-if="isInitEnd" class="text-xl text-center text-gray flex flex-direction align-center justify-center padding-top">
				<image src="../../static/message.png" mode="widthFix" class="no_data"></image>
				<text class="margin-top text-df">暂无反馈内容~</text>
			</view>
		</block>
		<!-- 无数据 end -->
		<!-- 断网监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 断网监测 end -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShowLoading: false, //数据加载动画
			isInitEnd: false, //  数据为空true
			list: [], //列表数据
			thumb: ''
		};
	},
	onLoad() {
		console.log(global.userInfo, 555);
		this.thumb = global.userInfo.head_img;
		// 获取反馈数据
		this.get_list();
	},
	methods: {
		/**
		 * @description 获取反馈数据
		 */
		get_list() {
			// 开启数据加载动画
			this.isShowLoading = true;
			this.$api
				.get(global.apiUrls.myFeedback)
				.then(res => {
					if (res.data.code == 1) {
						this.list = res.data.data;
						// 数据为空时显示空状态
						if (res.data.data.length == 0) {
							this.isInitEnd = true;
						}
					} else {
						// 数据为空
						this.isInitEnd = true;
						// 数据加载失败提示
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
					// 关闭数据加载动画
					this.isShowLoading = false;
				})
				.catch(err => {
					// 数据加载失败
					this.isInitEnd = true;
					// 关闭数据加载动画
					this.isShowLoading = false;
				});
		},

		/**
		 * @description 预览图片
		 * @param {Object} list 图片数组
		 * @param {String} index 当前图片链接
		 */
		ViewImage(list, index) {
			uni.previewImage({
				urls: list,
				current: index
			});
		}
	}
};
</script>

<style lang="scss">
.page {
	height: 100%;
	min-height: 100vh;
	background: white !important;
}

.feedback-list {
	border-top: 1rpx solid #f1f1f1;
	padding: 0 32rpx;
}
.feedback-list .feedback-list-item:last-child {
	padding-bottom: 40rpx !important;
}
.item-list {
	padding-bottom: 30rpx;
	border-top: 1rpx solid #f1f1f1;
	padding-top: 20rpx;
	.avatar {
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
		flex-shrink: 0;
		image {
			height: 80rpx;
			width: 80rpx;
			border-radius: 50%;
		}
	}

	.item-desc {
		padding-left: 30rpx;

		.writeContent {
			width: calc(100%-120rpx);
			line-height: 50rpx;
		}

		// 反馈图片 start
		.img-list {
			position: relative;
			display: flex;
			flex-wrap: wrap;

			.img-list-item {
				width: 150rpx;
				height: 150rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 反馈图片 end
		.concart {
			line-height: 50rpx;
			padding-bottom: 20rpx;
		}

		.feedback-type {
			line-height: 50rpx;
		}

		// 客服回复 start
		.replay-content {
			margin-top: 20rpx;
			background-color: #F8F8F8;
			padding: 20rpx 20rpx;
			border-radius: 10rpx;
			line-height: 40rpx;
			.replay-desc {
				width: 150rpx;
				color: #496A9D !important;
				flex-shrink: 0;
			}
			.replay-text {
				width: calc(100% - 200);
				line-height: 40rpx;
			}
		}

		// 客服回复 end
	}
}
.feedback-list .feedback-list-item:first-child {
	padding-top: 0rpx !important;
}
// 反馈列表 end
.no_data {
	width: 400rpx;
}
</style>
